<template>
  <div>
    <!-- 头部上面部分 -->
    <div class="topHead">
      <div class="login" @click="loginPage">登录</div> 
    </div>
    <!-- 头部 -->
    <div id="header">
      <!-- logo -->
      <div class="logo">
        <span>FT_BLOG</span>
      </div>
      <!-- 搜索框 -->
      <div class="operate">
        <el-input
          placeholder="请输入内容"
          prefix-icon="el-icon-search"
          v-model="input2"
          @change="handleSearch"
          class="textColor">
        </el-input>
      </div>
      <!-- 导航栏 -->
      <ul class="menu">
        <li @click="goto('/home/blog?msg=hot')">
          <span :class="{isActive:isActive == 'home'}">
          <span class="iconfont icon-shouye"></span>首页</span>
        </li>
        <li @click="goto('/time')">
          <span :class="{isActive:isActive == 'time'}">
          <span class="iconfont icon-timeAxis"></span>时间轴</span>
        </li>
        <li @click="goto('/about')">
          <span :class="{isActive:isActive == 'about'}">
          <span class="iconfont icon-gywm"></span>关于我</span>
        </li>
      </ul>
    </div>
  </div> 
</template>

<script>
  export default {
    data() {
      return {
        input2:'', //搜索内容
        isActive:'home' //默认当前选中标签
      };
    },
    mounted(){
      this.isActive=this.$route.path.split('/')[1]
    },
    methods: {
      //跳转到登录页面
      loginPage(){
        this.$router.push('/login')
      },
      //搜索事件
      async handleSearch(){
        this.$router.push({path:"/home/search",query:{
          key:this.input2
        }})
      },
      //导航栏跳转时间
      goto(path){
        this.isActive = path.slice(1)
        this.$router.push(path)
      }
    }
  }
</script>

<style scoped>
/* 头部上面部分 */
  .topHead{
    width:100%;
    height:50px;
    background-color: #292929;
    position:relative;
  }
  .login{
    height:30px;
    width:100px;
    line-height:30px;
    text-align:center;
    border-radius:5px;
    background-color: #7fb442;
    color: #d2f0af;
    position: absolute;
    top:10px;
    right:10%;
    cursor:pointer;
  }
/* 头部   */
  #header{
    height:80px;
    width:100%;    
    box-sizing: border-box;
    padding-left:10%;
    padding-right:10%;
    border-bottom:1px solid #292929;
  }
  .logo{
    float:left;
    width:100px;
    height:80px;
    font-weight: bold;
  }
  .logo span{
    display:inline-block;
    height:80px;
    width:100px;
    line-height:80px;
    text-align:center;
    font-size:2rem;
  }
  .menu{
    height:80px;
    float:right;
  }
  .menu li{
    height:80px;
    float:left;
    text-align:center;
    line-height:80px;
    font-size:1.2rem;
    font-weight: bold;
    margin-right:40px;
    cursor:pointer;
  }
  .menu li span{
    padding-right:10px;
  }
  .isActive{
    border-bottom:3px solid #7fb442;
    padding-bottom:10px;
    padding-left:8px;
    padding-right:8px;
  }
  @media screen and (max-width:700px){
    #header{
      padding-left:2%;
      padding-right:2%;
    }
  }
  /* 搜索框 */
 .operate{
   float:right;
   height:80px;
   margin-left:20px;
  }
  .operate .el-input{
    width:230px;
    margin-top:20px;
    display:inline-block;
    border: 1px solid #292929;;
  }
  .el-menu.el-menu--horizontal {
    border-bottom:none;
  }
  @media screen and (max-width:980px){
    .operate{
      display:none
    }
  }
  #el-menu{
    float:left
  }
  .el-menu-item {
    font-size:18px;
  }
  .el-menu-item.is-active{
    background-color: #fff !important;
    color:#003366;
    /* border-radius:5px; */
  }
   /* active-text-color="#666666" */
  .el-menu-item span{
    margin-right:8px;
  }
</style>